<template>
  <section>
    <el-row>
      <el-col :span="24">
        <!--表单-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="选课">
            <el-select v-model="formInline.payment.chooseCourseId" filterable placeholder="请选择">
              <el-option
                v-for="item in chooseCourses"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
        </el-form>
        <!--表格-->
        <el-table
          :data="tableData"
          height="500"
          border
          style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="缴费编号">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="选课编号">
                  <span>{{ props.row.chooseCourseId }}</span>
                </el-form-item>
                <el-form-item label="学生姓名">
                  <span>{{ props.row.studentName }}</span>
                </el-form-item>
                <el-form-item label="课程名称">
                  <span>{{ props.row.courseName }}</span>
                </el-form-item>
                <el-form-item label="期数">
                  <span>{{ props.row.periodNumber }}</span>
                </el-form-item>
                <el-form-item label="购买课时">
                  <span>{{ props.row.classHourCount }}</span>
                </el-form-item>
                <el-form-item label="赠送课时">
                  <span>{{ props.row.giveClassHourCount }}</span>
                </el-form-item>
                <el-form-item label="课时费">
                  <span>{{ props.row.classFee }}</span>
                </el-form-item>
                <el-form-item label="材料费">
                  <span>{{ props.row.materialFee }}</span>
                </el-form-item>
                <el-form-item label="合计金额">
                  <span>{{ props.row.totalAmount }}</span>
                </el-form-item>
                <el-form-item label="上次结转剩余总课时">
                  <span>{{ props.row.lastCarryOverTotalRemainClass }}</span>
                </el-form-item>
                <el-form-item label="上次结转剩余缴费课时">
                  <span>{{ props.row.lastCarryOverRemainClass }}</span>
                </el-form-item>
                <el-form-item label="上次结转剩余赠送课时">
                  <span>{{ props.row.lastCarryOverRemainGiveClassHourCount }}</span>
                </el-form-item>
                <el-form-item label="剩余总课时">
                  <span>{{ props.row.remainTotalClassHourCount }}</span>
                </el-form-item>
                <el-form-item label="剩余缴费课时">
                  <span>{{ props.row.remainClass }}</span>
                </el-form-item>
                <el-form-item label="剩余赠送课时">
                  <span>{{ props.row.remainGiveClassHourCount }}</span>
                </el-form-item>
                <el-form-item label="备注">
                  <span>{{ props.row.remark }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column type="selection">
          </el-table-column>
          <el-table-column
            prop="id"
            label="编号"
            width="90">
          </el-table-column>
          <el-table-column
            prop="studentName"
            label="学生姓名"
            width="90">
          </el-table-column>
          <el-table-column
            prop="courseName"
            label="课程名称"
            width="90">
          </el-table-column>
          <el-table-column
            prop="paymentDate"
            label="缴费日期"
            width="180">
            <template slot-scope="scope">
              {{scope.row.paymentDate|datefmt("YYYY-MM-DD")}}
            </template>
          </el-table-column>
          <el-table-column
            prop="periodNumber"
            label="期数"
            width="90">
          </el-table-column>
          <el-table-column
            prop="classHourCount"
            label="购买课时"
            width="90">
          </el-table-column>
          <el-table-column
            prop="giveClassHourCount"
            label="赠送课时"
            width="90">
          </el-table-column>
          <!--<el-table-column-->
          <!--prop="classFee"-->
          <!--label="课时费"-->
          <!--width="90">-->
          <!--</el-table-column>-->
          <!--<el-table-column-->
          <!--prop="materialFee"-->
          <!--label="材料费"-->
          <!--width="90">-->
          <!--</el-table-column>-->
          <!--<el-table-column-->
          <!--prop="discount"-->
          <!--label="折扣"-->
          <!--width="90">-->
          <!--</el-table-column>-->
          <el-table-column
            prop="totalAmount"
            label="合计金额"
            width="90">
          </el-table-column>
          <el-table-column
            prop="lastCarryOverTotalRemainClass"
            label="上次结转剩余总课时"
            width="90">
          </el-table-column>
          <el-table-column
            prop="lastCarryOverRemainClass"
            label="上次结转剩余缴费课时"
            width="90">
          </el-table-column>
          <el-table-column
            prop="lastCarryOverRemainGiveClassHourCount"
            label="上次结转剩余赠送课时"
            width="90">
          </el-table-column>
          <el-table-column
            prop="remainTotalClassHourCount"
            label="剩余总课时"
            width="90">
          </el-table-column>
          <el-table-column
            prop="remainClass"
            label="剩余缴费课时"
            width="90">
          </el-table-column>
          <el-table-column
            prop="remainGiveClassHourCount"
            label="剩余赠送课时"
            width="90">
          </el-table-column>
          <el-table-column label="操作" width="280">
            <template scope="scope">
              <el-button type="primary" class="el-icon-edit" size="small" @click="handleEdit(scope.$index, scope.row)">
                编辑
              </el-button>
              <el-button type="danger" class="el-icon-delete" size="small"
                         @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
              <el-button type="primary" class="el-icon-edit" size="small"
                         @click="printPdf(scope.$index, scope.row)">打印
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[4, 8, 16]"
            layout="total,sizes,prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="dialogFormVisible" title="修改缴费" :visible="dialogFormVisible" size="tiny"
               :before-close="handleClose">
      <el-form id="#paymentForm" ref="payment" :rules="rules" :model="payment" label-width="80px" class="demo-ruleForm">
        <el-form-item label="选课信息" prop="chooseCourseId">
          <el-select id="#chooseCourse" v-model="payment.chooseCourseId" filterable placeholder="请选择"
                     @change="changeValue">
            <el-option
              v-for="item in chooseCourses"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="期数" prop="periodNumber">
          <el-input-number v-model="payment.periodNumber" @change="handleChange" :min="0" :max="10"
                           label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="购买课时" prop="classHourCount">
          <el-input v-model="payment.classHourCount">
          </el-input>
        </el-form-item>
        <el-form-item label="折扣" prop="discount">
          <el-select v-model="payment.discount" placeholder="请选择" @change="calculate()">
            <el-option
              v-for="item in discountOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课时费" prop="classFee">
          <el-input v-model="payment.classFee"></el-input>
        </el-form-item>
        <el-form-item label="材料种类" prop="materialCatagory">
          <el-checkbox-group
            v-model="payment.materialCatagory">
            <el-checkbox v-for="item in materials" :label="item.value" :value="item.value"
                         :key="item.value" name="materialCatagory">
              {{item.label}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="材料费" prop="materialFee">
          <el-input v-model="payment.materialFee"></el-input>
        </el-form-item>
        <el-form-item label="合计金额" prop="totalAmount">
          <el-input v-model="payment.totalAmount"></el-input>
        </el-form-item>
        <el-form-item label="赠送课时" prop="giveClassHourCount">
          <el-input v-model="payment.giveClassHourCount"></el-input>
        </el-form-item>
        <el-form-item label="缴费日期" prop="paymentDate">
          <el-date-picker
            v-model="payment.paymentDate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea"
                    :rows="2"
                    v-model="payment.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleCalculate">计算</el-button>
          <el-button type="primary" @click="handleSave" :loading="editLoading">保存</el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="dialogPrintFormVisible" title="打印缴费收据" :visible="dialogPrintFormVisible" size="tiny">
      <el-form id="form1">
      </el-form>
    </el-dialog>
  </section>
</template>
<script>
  /* eslint-disable no-sequences */
  import {getLodop} from '../../common/LodopFuncs.js'
  import imgUrl from '../../common/111111.jpg';

  const ERR_OK = "success";
  export default {
    data() {
      return {
        imgUrl: imgUrl,
        rules: {
          chooseCourseId: [
            {required: true, message: '请输入选课信息', trigger: 'change'},
          ],
          periodNumber: [
            {required: true, message: '请输入期数', trigger: 'change'}
          ],
          classHourCount: [
            {required: true, message: '请输入课时', trigger: 'blur'}
          ],
          discount: [
            {required: true, message: '请输入折扣', trigger: 'change'}
          ],
          classFee: [
            {required: true, message: '请输入课时费', trigger: 'blur'},
          ],
          materialCatagory: [
            {type: 'array', required: true, message: '请至少选择一个材料', trigger: 'change'}
          ],
          materialFee: [
            {required: true, message: '请输入材料费', trigger: 'blur'}
          ],
          totalAmount: [
            {required: true, message: '请输入合计金额', trigger: 'blur'}
          ],
          paymentDate: [
            {type: 'date', required: true, message: '请缴费日期', trigger: 'change'}
          ],
        },
        materials: [],
        formInline: {
          payment: {
            chooseCourseId: '',
          }
        },
        tableData: [],
        dialogFormVisible: false,
        dialogPrintFormVisible: false,
        editLoading: false,
        payment: {
          id: '',
          chooseCourseId: '',
          studentName: '',
          courseName: '',
          classHourCount: '',
          classFee: '',
          paymentDate: '',
          periodNumber: '',
          materialFee: '',
          totalAmount: '',
          discount: '',
          remark: '',
          materialCatagory: [],
          singleClassTimeFee: '',
          giveClassHourCount: 0,
          remainClass: '',
          remainGiveClassHourCount: '',
          remainTotalClassHourCount: '',
          lastCarryOverTotalRemainClass: '',
          lastCarryOverRemainGiveClassHourCount: '',
          lastCarryOverRemainClass: '',
        },
        remainClassCount: [{
          paymentName: '',
          remainClassCount: ''
        }],
        currentPage: 1,
        pageSize: 4,
        total: 10,
        table_index: 999,
        chooseCourses: [],
        discountOptions: [{
          value: 0.95,
          label: '九五折'
        }, {
          value: 0.98,
          label: '九八折'
        }, {
          value: 0.9,
          label: '九折'
        }, {
          value: 1,
          label: '无折扣'
        }],
        LODOP: ''
      };
    },
    created() {
      this.handleQuery();
    },
    methods: {
      printPdf(index, row) {
        this.dialogPrintFormVisible = true;
        this.CreateOneFormPage();
        // this.LODOP.PRINT();
      },
      CreateOneFormPage() {
        this.LODOP = getLodop();
        this.LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_装载背景图");
        this.LODOP.ADD_PRINT_SETUP_BKIMG("<img border='0' src='" + this.imgUrl + "'>");
        this.LODOP.ADD_PRINT_TEXT(83, 78, 75, 20, "寄件人姓名");
        this.LODOP.ADD_PRINT_TEXT(109, 137, 194, 20, "寄件人单位名称");
        this.LODOP.ADD_PRINT_TEXT(134, 90, 238, 35, "寄件人的详细地址");
        this.LODOP.ADD_PRINT_TEXT(85, 391, 75, 20, "收件人姓名");
        this.LODOP.ADD_PRINT_TEXT(108, 440, 208, 20, "收件人单位名称");
        this.LODOP.ADD_PRINT_TEXT(137, 403, 244, 35, "收件人详细地址");
        this.LODOP.ADD_PRINT_TEXT(252, 33, 164, 40, "内件品名");
        this.LODOP.ADD_PRINT_TEXT(261, 221, 100, 20, "内件数量");
        this.LODOP.ADD_PRINT_TEXT(83, 212, 100, 20, "寄件人电话");
        this.LODOP.ADD_PRINT_TEXT(80, 554, 75, 20, "收件人电话");
        // strModeType：模式类型有“PREVIEW_IN_BROWSE”“SETUP_IN_BROWSE”“DESIGN_IN_BROWSE”“BKIMG_IN_PREVIEW”等等;
        // intModeValue：1-表示是，0或其它-表示不是(不调用本函数也表示不是)。
        this.LODOP.SET_SHOW_MODE("BKIMG_IN_PREVIEW", 1);
        this.LODOP.PREVIEW();
      },
      changeValue(value) {
        console.log(value);
        let obj = {};
        obj = this.chooseCourses.find((item) => {
          return item.value === value;
        });
        console.log(obj);
        this.payment.singleClassTimeFee = obj.label.split("|")[2];
      },
      calculate() {
        let value = parseInt(this.payment.periodNumber) * 16 * parseFloat(this.payment.singleClassTimeFee) * parseFloat(this.payment.discount);
        this.payment.classFee = Math.floor(value);
        console.log(this.payment.classFee);
      },
      handleChange(value) {
        this.payment.classHourCount = parseInt(this.payment.periodNumber) * 16;
        console.log(value);
        this.calculate();
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },
      handleQuery() {
        console.log("query invoke！！！");
        var param = {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          chooseCourseId: this.formInline.payment.chooseCourseId,
        };
        this.$http.get('/payment', {params: param}).then((response) => {
          response = response.data;
          if (response.status === ERR_OK) {
            this.tableData = response.data.paymentInfos;
            this.total = response.data.total;
            this.chooseCourses = response.data.chooseCourses;
            this.materials = response.data.materialsOptions;
          } else {
            this.$message.error('操作失败');
          }
        });
      },
      handleDelete(index, row) {
        this.payment = Object.assign({}, row);
        this.$confirm('确认删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: 'cancel'
        }).then(() => {
          var param = {id: this.payment.id}
          this.$http.delete('/payment', {params: param}).then((response) => {
            response = response.data;
            if (response.status === ERR_OK) {
              this.$message({
                message: "操作成功！",
                type: 'success'
              });
              this.handleQuery();
            } else {
              this.$message.error('操作失败');
            }
          });
        }).catch(() => {
        });
      },

      resetForm() {
        this.payment.id = '',
          this.payment.chooseCourseId = '',
          this.payment.studentName = '',
          this.payment.courseName = '',
          this.payment.classHourCount = '',
          this.payment.classFee = '',
          this.payment.paymentDate = '',
          this.payment.periodNumber = '',
          this.payment.materialFee = '',
          this.payment.totalAmount = '',
          this.payment.discount = '',
          this.payment.remark = '',
          this.payment.materialCatagory = []
      },
      handleAdd(index, row) {
        this.dialogFormVisible = true;
        this.table_index = index;
        this.resetForm();
      },
      handleEdit(index, row) {
        this.dialogFormVisible = true;
        this.$http.get('/payment/' + row.id).then((response) => {
          response = response.data;
          if (response.status === ERR_OK) {
            this.payment = response.data;
            console.log(this.payment);
          } else {
            this.$message.error('数据不存在');
          }
        });
        this.table_index = index;
      },
      handleCalculate() {
        this.payment.totalAmount = parseFloat(this.payment.classFee) + parseFloat(this.payment.materialFee);
      },
      handleSave() {
        this.$confirm('确认修改吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: 'cancel'
        }).then(() => {
          this.$refs["payment"].validate((valid) => {
            if (valid) {
              this.editLoading = true;
              this.tableData.splice(this.table_index, 1, this.payment);
              if (this.payment.id != null && this.payment.id !== '') {
                this.$http.patch('/payment', this.payment).then((response) => {
                  response = response.data;
                  if (response.status === ERR_OK) {
                    this.$message({
                      message: "操作成功！",
                      type: 'success'
                    });
                    this.handleQuery();
                  } else {
                    this.$message.error('操作失败');
                  }
                });
              } else {
                this.$http.post('/payment', this.payment).then((response) => {
                  response = response.data;
                  if (response.status === ERR_OK) {
                    this.$message({
                      message: "操作成功！",
                      type: 'success'
                    });
                    this.handleQuery();
                  } else {
                    this.$message.error('操作失败');
                  }
                });
              }
              this.editLoading = false;
              this.dialogFormVisible = false;
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        }).catch(() => {
          this.$message({
            message: "操作失败！",
            type: 'fail'
          });
        });
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.handleQuery();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.handleQuery();
      }
    }
  };
</script>

<style scoped>

  .el-select .el-input {
    width: 130px;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .el-pagination {
    text-align: center;
    margin-top: 30px;
  }

  .el-message-box__btns .cancel {
    float: right;
    margin-left: 10px;
  }
</style>
